<template>
  <div>
    <!--box-shadow: 0 0 6px  rgba(0,0,0,0.95);-->
    <el-header style="font-size: 24px; border-bottom: 1px solid #cccccc; line-height: 60px;display:flex; justify-content: space-between">
      <div style="width: 900px; display:flex;">
        <div class="box_bgd" style="font-size: 24px; margin-right: 10px;" @click="isC">
          <!-- 点击展开收起导航和切换对应图标 -->
          <i v-show="block" class="el-icon-s-fold"></i>
          <i v-show="toggle" class="el-icon-s-unfold"></i>
        </div>
        <div style="flex: 1;">
          <div>
            <el-breadcrumb separator="/" style="line-height: 60px;height: 60px; text-align:center;">
              <el-breadcrumb-item :to="{ path: '/main'} "><span>首页</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item
                  v-for="(item,index) in breadList"
                  :key="index"><span>{{ item.meta.title }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </div>
      <div>
          <el-dropdown placement="bottom" size="small" trigger="click">
            <div style="width: 200px; cursor: pointer; font-size: 16px; text-align:center; padding-right: 20px;;">
              <el-avatar :size="40" style="vertical-align:middle; margin-bottom: 5px; margin-right: 10px" :src="userInfo.imageUrl"></el-avatar>
              <span class="el-dropdown-link" style="line-height: 60px; height: 60px;">
                <span v-if="userInfo.stuList != null">{{ userInfo.stuList[0].name }}</span>
                <span v-if="userInfo.teaList != null">{{ userInfo.teaList[0].name }}</span>
                <span v-if="userInfo.manList != null">{{ userInfo.manList[0].name }}</span>
                <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
              </span>
            </div>
            <el-dropdown-menu size="small" style="margin: 0 auto;">
              <el-dropdown-item @click.native="goUserInfo"><i class="el-icon-user"></i>个人信息</el-dropdown-item>
              <el-dropdown-item divided @click.native="logOut"><i class="el-icon-switch-button"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
    </el-header>

  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      isCollapse: false, //导航栏默认为展开
      toggle: false, //第二个图标默认隐藏
      block: true, //默认显示第一个图标
      logoTextShow: true,
      userType: '',
      userRole: '',
      breadList: [], // 路由集合
    }
  },
  computed: {
    userInfo() {
      return sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    },
    userTypeId() {

      return localStorage.getItem("userRole")
    }
  },
  watch: {
    $route() {
      this.getBreadList()
    }
  },
  created() {
    this.getBreadList()
  },
  methods: {
    logOut() {
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("menu");
      this.$router.replace('/')
      this.$message.success("退出登录");
    },
    goUserInfo(){
      this.$router.replace('/main/personal/updateInfo')

    },
    // 动态控制展开与收起和切换对应图标
    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
      this.logoTextShow = !this.logoTextShow
      this.$bus.$emit("isCollapse", this.isCollapse, this.logoTextShow) // 传值

    },
    getBreadList() {
      //$route.matched 将会是一个包含从上到下的所有对象 (副本)。
      let matched = this.$route.matched;

      if (matched[0].name === 'main') {
        matched = matched.filter(item => {
          return item.name !== 'main';
        })
      }
      this.breadList = matched;
    },
  },


}
</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
  height: 100%;
  padding: 0 !important;
}

.el-aside {
  background-color: #393e42;
  color: #333;
  height: 100vh;
}

.el-menu {
  border-right-width: 0;
}

.el-main {
  color: #333;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

.box_bgd {
  height: 60px;
  cursor: pointer;
  width: 54px;
  margin-left: 20px;
  text-align: center;
}

.box_bgd:hover {
  background-color: #f6f4f4;
}

.box_bgd i {
  font-size: 20px;
}

/deep/.el-popper[x-placement^=bottom] {
  margin-top: 5px;
}

</style>